<template>
  <div>
    <backgroud />
    <el-row>
      <el-col :span="6"
              :offset="2">
        <el-card :body-style="{ padding: '0px' }"
                 @click.native="nextPage()">
          <img src="@/assets/statistics.png"
               class="image">
          <div style="padding: 14px;">
            <span>工时统计</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6"
              :offset="1">
        <el-card :body-style="{ padding: '0px' }"
                 @click.native="nextPage()">
          <img src="@/assets/manage.png"
               class="image">
          <div style="padding: 14px;">
            <span>项目管理</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6"
              :offset="1">
        <el-card :body-style="{ padding: '0px' }"
                 @click.native="nextPage()">
          <img src="@/assets/write.png"
               class="image">
          <div style="padding: 14px;">
            <span>数据汇总</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import backgroud from "@/components/Backgroud";
    export default {
        data() {
            return {};
        },
        methods: {
            nextPage() {
                this.$router.push("/select");
            }
        },
        components: {
            backgroud
        }
    };
</script>

<style lang="less" scoped>
  .image {
    width: 50px;
    height: 50px;
    display: block;
  }
  .el-card {
    width: 170px;
    height: 400px;
    margin: 70px auto;
    color: #409eff;
    cursor: pointer;
  &:hover {
     box-shadow: rgb(145, 145, 145) 10px 10px 30px 5px;
   }
  }
  img {
    margin: 100px auto 50px auto;
  }
</style>
